﻿@{
    ViewBag.Title = "Quản lý thẻ";
    Layout = "~/Views/Shared/_CpanelLayout.cshtml";
}
<script type="text/javascript">
    $(document).ready(function () {
        $(".active-tab").removeClass("active-tab");
        $("a[rel=rel-card]").parent().parent().css("display", "block");
        $("a[rel=rel-card]").parent().parent().prev().addClass("active-tab");
        $("a[rel=rel-card]").addClass("active-tab");
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {

        var url = "/Card/getCardJson";
        var rowID = 0;
        var source = {
            datatype: "json",
            datafields: [
                               { name: 'CardID', type: 'int' },
                               { name: 'CardName', type: 'string' },
                               { name: 'CardImage', type: 'string' },
                               { name: 'CompanyImg', type: 'string' },
                               { name: 'FlagImage', type: 'string' },
                               { name: 'Cost', type: 'string' },
                               { name: 'Interest', type: 'float' },
                               { name: 'Display', type: 'bool' },
            ],
            id: 'CardID',
            url: url
        };
        var imagerenderer = function (row, datafield, value) {
            return '<img style="margin:10px;10px;10px;10px;" height="50" width="100" src="/content/upload/images/' + value + '"/>';
        }
        var flagimage = function (row, datafield, value) {
            return '<img style="margin-left: 38px;margin-top: 23px;width: auto;" height="25" width="40" src="/content/images/' + value + '"/>';
        }
        var imagerenderer_company = function (row, datafield, value) {
            return '<img style="margin:10px;10px;10px;10px;" height="50" width="150" src="/content/upload/images/' + value + '"/>';
        }
        var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {

            return '<span style="margin: 5px;font-weight:bold; float: ' + columnproperties.cellsalign + '; color: #2069b4;">' + value + '</span>';

        }
        var InteresRate = function (row, columnfield, value, defaulthtml, columnproperties) {

            return '<span style="display:block; text-align:center;">' + value + ' %</span>';

        }
        $("#grid_news").jqxGrid({
            width: '100%',
            source: source,
            rowsheight: 70,
            autoheight: true,
            pageable: true,
            sortable: true,
            altrows: true,
            enabletooltips: true,
            selectionmode: 'multiplecellsextended',
            columns: [
            { text: 'ID', datafield: 'CardID', width: 55 },
              { text: 'Ngôn ngữ', datafield: 'FlagImage', width: 100, height: 45, cellsrenderer: flagimage },
           { text: 'Logo', datafield: 'CompanyImg', width: 200, width: 170, height: 70, cellsrenderer: imagerenderer_company },
           { text: 'Hình ảnh', datafield: 'CardImage', width: 120, height: 70, cellsrenderer: imagerenderer },
            { text: 'Tên thẻ', datafield: 'CardName', width: 230 },
            { text: 'Lãi suất', datafield: 'Interest', width: 150, cellsrenderer: InteresRate },
           { text: 'Phí năm', datafield: 'Cost', width: 150, cellsrenderer: cellsrenderer },
             { text: 'Hiển thị', columntype: 'checkbox', datafield: 'Display' },

           {
               text: 'Edit', datafield: 'Edit', columntype: 'button', width: 70, cellsrenderer: function () {
                   return "Edit";
               }, buttonclick: function (editrow) {

                   var dataRecord = $("#grid_news").jqxGrid('getrowdata', editrow);

                   window.location = "/Card/UpdateCard/" + dataRecord.CardID;


               }
           },

           {
               text: 'Remove', datafield: 'Delete', columntype: 'button', width: 70, cellsrenderer: function () {
                   return "Delete";
               }, buttonclick: function (editrow) {

                   var comfim = confirm("@FOResource.UI.CpanelLayout.confimdelete");
                if (comfim) {
                    var dataRecord = $("#grid_news").jqxGrid('getrowdata', editrow);
                    $.ajax({
                        type: "POST",
                        url: "/Card/DeleteCard",
                        datatype: "json",
                        data: { CardID: dataRecord.CardID },
                        success: function (result) {
                            if (result["Status"] == "OK") {
                                alert("@FOResource.UI.CpanelLayout.deletesuccess");
                                $("#grid_news").jqxGrid({ source: source });
                            }
                            else {

                                alert("@FOResource.UI.CpanelLayout.deletesuccess");
                            }
                        }
                    });
                }


            }
            }
             ]
         });

     });

</script>
<div class="content-module-heading cf">
    <h3 class="fl">Quản lý thẻ</h3>
</div>
<!-- end content-module-heading -->


<div class="innerLR">
    <div id="grid_news"></div>
</div>
